<template>
    <div class="bg-gray-300 h-[560px]">
        <div class="p-[5px]">
            <span> 零件名称:</span>
            <el-select v-model="value" placeholder="Select" size="small" style="width: 100px">
                <el-option v-for="item in totalstore.printOption" :key="item" :label="item" :value="item" />
            </el-select>
        </div>
        <div>
            <el-table class="text-white" :data="dispatchHistry" border style="width: 100%"
                :row-class-name="tableRowClassName1">
                <el-table-column type="index" label="序号" width="180" />
                <el-table-column prop="type" label="零件类别" width="180" />
                <el-table-column prop="vinNo" label="底盘号" />
                <el-table-column prop="partNumber" label="目标零件号" />
                <el-table-column label="状态" width="120">
                    <template #default="scope">
                        <div :style="getStatusBackgroundColor(scope.row)">
                            {{ scope.row.status }}
                        </div>
                    </template>
                </el-table-column>
                <!-- 保留原有扫描列模板（如需展示可取消注释） -->

            </el-table>
        </div>
    </div>
</template>

<script setup lang='js'>
import { ref, onMounted } from 'vue';
// 选择框用
import { useTotalStore } from '@/stores/total';
const totalstore = useTotalStore();
// 请求历史发货单接口
import { getDispatchHistry } from '@/api/fis';

let dispatchHistry = ref([]);
let data = { page: 0, size: 100, sort: [] };

const funDispatchHistry = async () => {
    try {
        const res = await getDispatchHistry(data);
        if (res?.content?.length) {
            dispatchHistry.value = res.content.flatMap(item =>
                (item.invoicePartsHistory || []).map(element => ({
                    ...element,
                    status: element.status === 1 ? '扫描成功' : element.status === -1 ? '扫描失败' : '未扫描',
                    type: "顶棚"
                }))
            );
        }
    } catch (error) {
        dispatchHistry.value = [];
    }
};

const value = ref('顶棚');
const tableRowClassName1 = ({ rowIndex }) => `el-table__row--level-${rowIndex % 2}`; // 优化行类名

// 新增状态背景色计算方法
const getStatusBackgroundColor = (row) => {
    switch (row.status) {
        case '扫描成功': return { backgroundColor: '#4CAF50' }; // 绿色
        case '扫描失败': return { backgroundColor: '#FF4444' }; // 红色
        default: return { backgroundColor: '#888' }; // 未扫描无背景色
    }
};

onMounted(funDispatchHistry);
</script>

<style scoped>
:deep(.el-table__header th) {
    background-color: #00b0f0 !important;
    color: white;
    text-align: center !important;
}

/* 优化行背景色类名（使用 Element Plus 原生类名） */
:deep(.el-table__row--level-0) {
    background-color: #e7f2fc !important;
    color: black;
}

:deep(.el-table__row--level-1) {
    background-color: #cbe2f0 !important;
    color: black;
}

:deep(.el-table .cell) {
    text-align: center;
}

:deep(.el-table--enable-row-hover .el-table__body tr:hover>td) {
    background-color: inherit !important;
}

/* 状态列文字颜色优化 */
:deep(.el-table .cell div) {
    color: black;
    padding: 4px 8px;
    border-radius: 2px;
}

/* 修改序号列字体颜色为黑色 */

</style>